<template>
	<view class="detail">
		<SRV-topbar :title="info.title" :isLeft="true"></SRV-topbar>
		<swiper class="swiper-box" v-if="info.cover">
			<swiper-item>
				<view class="swiper-item">
					<image :src="info.cover" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
        <view class="parent" v-if="info.mobile != ''">
        	<image :src="info.head_portrait" mode="aspectFill"></image>
        	<view class="txt">
        		<view class="txt_top">
        			<text class="oneline">{{info.realname}}</text>
        			<text class="oneline">{{info.mobile}}</text>
        		</view>
                <view class="adv_txt">邀请您开通超圳商户！</view>
        	</view>
        </view>
		<view class="info" v-html="info.content"></view>
		<view :style="'height:' + bottomHeight + 'rpx;'" class="bottom" @click="joinFun()">申请</view>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import ShareIndex from '../../static/share.js';
	export default {
		mixins: [ShareIndex],
		data() {
			return {
                applyType: '',
                parentKey: '',
				info: {
                    title: '申请开店',
                    cover: '',
                    content: '',
                    realname: '',
                    mobile: '',
                    nowKey: '',
                    head_portrait: '',
                    joinStatus: 0,
                },
                start: {
                    proposer_name: '',
                    proposer_mobile: ''
                },
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			}
		},
		methods: {
			getInfo() {
				serve.request({
                    url: '/store/open/main',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        applyType: _self.applyType,
                        parentKey: _self.parentKey,
                    },
                    v: '/v2',
                }).then(res => {
                    _self.info = res.data;
                    _self.shareItem.title = _self.info.title;
                    _self.shareItem.imageUrl = _self.info.cover;
                    _self.shareItem.path = '/pages/store/open?applyType=' + _self.applyType + '&parentKey=' + _self.info.nowKey;
                });
			},
            joinFun() {
                if(_self.info.joinStatus == 9) {
                    uni.showToast({
                    	title: _self.info.joinMessage,
                    	icon : 'none',
                    	success:function(){ 
                    		setTimeout(function () { 
                    			uni.redirectTo({
                    			    url: '/pages/my/myStore'
                    			});
                    			return ;
                    		}, 2000) 
                    	} 
                    });
                    return ;
                }
                if(_self.info.joinStatus == 0) {
                    common.jump('login');
                    return ;
                }
                common.jump('appoint_view', '/pages/store/apply?applyType='+_self.applyType+'&parentKey='+_self.parentKey);
            },
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 150;
			}
            _self.applyType = options.applyType || 0;
            _self.parentKey = options.parentKey || '';
            if (_self.parentKey) {
                uni.setStorageSync('parentKey', _self.parentKey);
            } else {
                _self.parentKey = uni.getStorageSync('parentKey');
            }
		},
        onShow() {
            _self.getInfo();
        },
        onPullDownRefresh() {
            _self.getInfo();
        }
	}
</script>

<style scoped lang="scss">
	.detail {
        margin-bottom: 20rpx;
		.swiper-box {
			width: 100%;
			height: 400upx;

			image {
				width: 100%;
				height: 400upx;
			}
		}
        .parent {
        	display: flex;
        	align-items: center;    
            padding: 20rpx 30rpx;
            border-bottom: 1rpx solid #eaeaea;
            
        	image {
        		width: 100rpx;
        		height: 100rpx;
        		border-radius: 50%;
        	}
        
        	.txt {
        		margin-left: 30rpx;
        		display: flex;
        		justify-content: center;
        		flex-direction: column;
        		text:first-child{
        			color: #333333;
        			font-size: 32rpx;
        			margin-right: 19rpx;
        		}
        		text:last-child {
        			color: #999999;
        			font-size: 28rpx;
        		}
        	}
            .adv_txt{
                color: #f60;
                font-size: 40rpx;
            }
        }
		.info {
			box-sizing: border-box;
			padding: 10upx 30upx 180upx 30upx;
			font-size: 32upx;
			color: #999999;
		}
        .bottom {
        	width: 100%;
        	height: 100rpx;
        	line-height: 100rpx;
        	text-align: center;
        	font-size: 32rpx;
        	color: rgba(255, 255, 255, 1);
        	background: rgba(251, 202, 63, 1);
        	bottom: 0rpx;
        	position: fixed;
        }
        
        
        .pay_type {
        	position: relative;
        	width: 100%;
        	background: #FFFFFF;
        	padding-bottom: 140upx;
        	max-height: 80vh;
        
        	text {
        		font-size: 42rpx;
        	}
        
        	.close {
        		position: absolute;
        		width: 23upx;
        		height: 23upx;
        		right: 40upx;
        		top: 45upx;
        	}
        
        	.title {
        		width: 100%;
        		text-align: center;
        		height: 100upx;
        		line-height: 100upx;
        		font-size: 36upx;
        		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
        	}
        
        	.paypir {
        		display: flex;
        		justify-content: center;
        		flex-direction: column;
        		align-items: center;
        		// padding: 20upx 0upx 20upx;
        		font-size: 28upx;
        
        		text:last-child {
        			color: #FF5F60;
        			font-size: 50upx;
        			font-weight: bold;
        			margin-top: 10upx;
        		}
        	}
        
        	.line2 {
        		width: 100%;
        		box-sizing: border-box;
        		padding: 36upx;
        		display: flex;
        		justify-content: space-between;
        		font-size: 28upx;
        		color: #333333;
        		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
        
        		.txt {
        			color: #999999;
        		}
        
        		.nosel {
        			width: 36upx;
        			height: 36upx;
        			border: 1upx solid rgba(60, 72, 104, 1);
        			border-radius: 50%;
        		}
        
        		.sel {
        			background-image: url(../../static/img/check.png);
        			background-repeat: no-repeat;
        			width: 40upx;
        			height: 40upx;
        			background-size: 100%;
        		}
        		.nocheck {
        			width: 36upx;
        			height: 36upx;
        			border: 1upx solid rgba(60, 72, 104, 1);
        			border-radius: 20%;
        		}
        		
        		.check {
        			background: url(../../static/img/checkbox_check.png);
        			background-repeat: no-repeat;
        			width: 40upx;
        			height: 40upx;
        			background-size: 100%;
        		}
        	}
        
        	.pay_bot {
        		width: 100%;
        		position: fixed;
        		left: 0;
        		bottom: 0;
        		height: 100upx;
        		background: #FFBF0A;
        		color: #fff;
        		font-size: 32upx;
        		line-height: 100upx;
        		text-align: center;
        		border-radius: 0;
        
        		&::after {
        			border: none;
        		}
        	}
        }
	}
</style>
